<template>
  <div class="select-box" v-if="isSelect" :style="positionStyle">

  </div>
</template>

<script>
export default {
  name: 'select-box',
  cnName: 'select-box',
  props: {
    position: Object,
    isSelect: Boolean,
    scale: Number
  },
  data() {
    return {
      positionStyle: {}
    }
  },
  methods: {
    calculatePosition() {
      const scale = this.scale
      const {startX, startY, x, y} = this.position
      const attr = {
        zIndex: 99999,
        // left
        x: 0,
        // top
        y: 0,
        // 宽
        w: 0,
        // 高
        h: 0,
        // 偏移
        offsetX: 0,
        offsetY: 0
      }

      // 处理位置
      if (x > startX && y > startY) {
        // 右下方向
        attr.x = startX
        attr.y = startY
        attr.w = Math.round((x - startX) / scale)
        attr.h = Math.round((y - startY) / scale)
      } else if (x > startX && y < startY) {
        // 右上方向
        attr.x = startX
        attr.w = Math.round((x - startX) / scale)
        attr.h = Math.round((startY - y) / scale)
        attr.y = startY - attr.h
      } else if (x < startX && y > startY) {
        // 左下方向
        attr.y = startY
        attr.w = Math.round((startX - x) / scale)
        attr.h = Math.round((y - startY) / scale)
        attr.x = startX - attr.w
      } else {
        // 左上方向
        attr.w = Math.round((startX - x) / scale)
        attr.h = Math.round((startY - y) / scale)
        attr.x = startX - attr.w
        attr.y = startY - attr.h
      }

      this.positionStyle = {
        zIndex: attr.zIndex + 1,
        left: `${attr.x}px`,
        top: `${attr.y}px`,
        width: `${attr.w}px`,
        height: `${attr.h}px`
      }

    }
  },
  watch: {
    position: {
      handler() {
        if (!this.isSelect) {
         this.positionStyle = {}
          return
        }
        this.calculatePosition()
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.select-box {
  border: 1px dashed #2589ff;
  position: absolute;
  background-color: rgba(69, 130, 230, .2);
  z-index: 0;
}
</style>
